<template>
  <!-- 人口统计 -->
  <div>
    <el-dialog center title="人员标记详情" modal width="40%" :visible.sync="isCheck">
      <div class="col acen">
        <div class="cen">
          <el-checkbox
            border
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
          >全选</el-checkbox>
        </div>
        <el-checkbox-group class="row" v-model="arr" @change="handlearrChange">
          <el-checkbox
            size="medium"
            border
            class="mt10 ml10"
            v-for="(item,idx) in cities"
            :label="item.name"
            :key="idx"
          >{{item.MC}}</el-checkbox>
        </el-checkbox-group>
        <div slot="footer" class="row">
          <el-button @click="isCheck=false">取 消</el-button>
          <el-button type="primary" @click="suerBtn">确 定</el-button>
        </div>
      </div>
    </el-dialog>

     <page :asideShow="asideShow">

      <div slot="toolbar" class="searchBox">
          <el-input placeholder="请输入姓名"
              clearable
              size="small"
              v-model="filters.username"
              style="width:200px"
               @keydown.enter.native="searchPerson"
              >
              </el-input>
          <el-button class="ml10" @click="searchPerson()" icon="el-icon-search" type="primary">搜索</el-button>
          <el-button class="ml10" type="primary" @click="addPerson">新增</el-button>
          <upload-excel-component class="ml10" :arr-param="cities" :on-success="handleSuccess" :before-upload="beforeUpload" />
           <el-button class="ml10" type="primary" @click="handleDownload">导出</el-button>
          <el-button class="ml10" @click="changeCheck()" icon="el-icon-s-operation" type="primary">编辑列表</el-button>
      </div>

      <!-- 表格 -->
      <div slot="content">
      <div class="cen mt10 f20 bold">已实物配租人员列表</div>
      <el-table
      :header-cell-style="{ background: '#e7eaf0', color: '#606266' }"
        class="mt10"
        ref="filterTable"
        :data="tableData"
        border
         stripe

        :highlight-current-row="true"
        style="width: 100%"
      >
        <el-table-column
        v-for="(item,index) in cities"
        :key="index"
         ：v-if="arr.indexOf(item.name)>-1"
          :prop="item.name"
          :label="item.MC"
          align="center"
          width="180"
        ></el-table-column>

        <el-table-column
          label="操作"
          align="center"
        >
            <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-setting"
              @click="handleEdit(scope.row)"
            >修改</el-button>
            <el-button
              size="mini"
              icon="el-icon-delete"
              type="danger"
              @click="handleDelete(scope.row)"
            >删除</el-button>

          </template>
        </el-table-column>

      </el-table>
      </div>
     <div slot="footer">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableCount"
      ></el-pagination>
      </div>
     </page>

       <el-dialog
        title="人员新增"
        :visible.sync="addDialogVisible"
        width="50%"
        :destroy-on-close="true"
        class="cen"
        >
       <el-form label-position="left" label-width="180px" v-model="thisForm">
           <el-form-item :label="item.MC" prop="item.name" v-for="(item,index) in cities" :key="index">
                <el-input v-model="thisForm[item.name]" clearable>
                </el-input>
           </el-form-item>
       </el-form>
       <el-button type="primary" @click="addPersonOne">提交</el-button>
      </el-dialog>

  </div>
</template>

<script>
const cityOptions = [
  // { MC: "序号", name: "index",value:"" },
  { MC: "姓名*", name: "name",value:"" },
  { MC: "性别*", name: "gender",value:"" },
  { MC: "证件类别*", name: "ldid" ,value:""},
  { MC: "证件号码*", name: "idCard" ,value:""},
  { MC: "出生日期*", name: "birth",value:"" },
  { MC: "民族*", name: "nation",value:"" },
  { MC: "婚姻状况*", name: "marry" ,value:""},
  { MC: "是否本地户籍*", name: "isLocal" ,value:""},
  { MC: "户籍所在地*", name: "nativePlace",value:"" },
  { MC: "户口迁入日期*", name: "enterTime" ,value:""},
  { MC: "居住年限*", name: "liveYears",value:"" },
  { MC: "联系电话*", name: "phone" ,value:""},
  { MC: "申请人月收入*", name: "income",value:"" },
  { MC: "就业情况*", name: "employment" ,value:""},
  { MC: "就业年限*", name: "employAge",value:"" },
  { MC: "文化程度*", name: "education",value:"" },
  { MC: "申请保障性住房类型*", name: "houseType" ,value:""},
  { MC: "申请人类型*", name: "applyPersonType" ,value:""},
  { MC: "保障方式*", name: "ensureType" ,value:""},
  { MC: "申请人所属群体*", name: "population" ,value:""},
  { MC: "申请所在行政区*", name: "district",value:"" },
  { MC: "家庭人口*", name: "family",value:"" },
  { MC: "申请人口数*", name: "applyNum" ,value:""},
  { MC: "人均月收入*", name: "avgIncome" ,value:""},
  { MC: "人均自有房屋建筑面积*", name: "avgArea" ,value:""},
  { MC: "自有房屋总建筑面积*", name: "allArea",value:"" },
  { MC: "申请日期*", name: "applyTime" ,value:""},
  { MC: "公示开始时间*", name: "noticeStartTime" ,value:""},
  { MC: "公示截止时间*", name: "noticeStopTime",value:"" },
  { MC: "公示是否同意*", name: "noticeIsSure",value:"" },
  { MC: "资格审核同意时间*", name: "verifyTime" ,value:""},
  { MC: "实施保障日期*", name: "doEnsureTime",value:"" },

  //    { MC: "配租房屋所在行政区*", name: "education" },
  { MC: "坐落小区名称*", name: "employAge" ,value:""},
  { MC: "合同签署日期*", name: "contractSignTime",value:"" },
  { MC: "合同生效日期*", name: "contractStartTime" ,value:""},
  { MC: "合同终止日期*", name: "contractEndTime" ,value:""},

  { MC: "合同状态*", name: "contractStatus" ,value:""},
  { MC: "是否单位签约*", name: "companySign",value:"" }
  // { MC: "轮候开始时间*", name: "education" ,value:""},
];
import { Loading } from 'element-ui';
export default {
  components: {  },
  data() {
    return {
      thisForm:{},
      asideShow:false,
      addDialogVisible:false,
      checkAll: false,
      isCheck: false,
      filters:{},
      arr: ["name","gender","ldid","idCard","nation","marry","isLocal","phone"],
      tableCount:0,
      cities: cityOptions,
      isIndeterminate: true,
      pickerOptions: {
        shortcuts: []
      },
      value1: [new Date(2019, 12, 10, 10, 10), new Date(2019, 12, 11, 10, 10)],
      value2: "",
      current: 1,
      pagesize: 10,
      where: {},
      tableData: []
    };
  },
  mounted(){
    this.getList();
  },
  methods: {
    //搜索人员
    searchPerson(){
       this.current = 1;
       this.getList();
    },
    //导入
    beforeUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 16
      if (isLt1M) {
        return true
      }
      this.$message({
        message: '文件过大，请小于16M！',
        type: 'warning'
      })
      return false
    },
    handleSuccess({ results, header }) {
      this.upload_many(results);
    },
    upload_many(total){
      const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
       let param =JSON.stringify({
         data:total
       })
       this.$api.personnel.upload_many(param).then(
         res=>{
           loading.close();
           this.getList()
         }
       )
    },
     handleDownload() {
      this.downloadLoading = true;
      let headers = [];

      for(let i=0;i<this.arr.length;i++){
         let obj = this.cities.find((item)=>{
           return item.name ==  this.arr[i]
         })
         if(obj){
           headers.push(obj.MC)
         }else{
           headers.push(this.arr[i])
         }
      }

      // import('@/vendor/Export2Excel').then(excel => {
      //   const tHeader = headers;
      //   const filterVal = this.arr;
      //    console.log(tHeader)
      //   console.log(filterVal)
      //   const list = this.tableData;
      //   const data = this.formatJson(filterVal, list);
      //   excel.export_json_to_excel({
      //     header: tHeader,
      //     data,
      //     filename: "人员配租表"
      //     // autoWidth: this.autoWidth,
      //     // bookType: this.bookType
      //   })
      //   this.downloadLoading = false
      // })
    },
    formatJson(filterVal, jsonData) {
      console.log(filterVal)
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    },

    handleEdit(row){
      this.thisForm=row;
      this.addDialogVisible=true;
    },
    changeCheck() {
      this.isCheck = true;
    },
    getList(){
      var paramd = {
        page:this.current,
        limit:this.pagesize,
        filter:this.filters
      };
      this.$api.personnel.zhujian_list(paramd).then((res) => {
        this.tableData = res.data;
        this.tableCount = res.count;

      });
    },
    handleDelete(row){
      this.$confirm('确认删除这条数据吗？',"提示",{
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(()=>{
         var paramd = {
           _id : row._id
         };
        this.$api.personnel.zhujian_dele_per(paramd).then(
          res=>{
            this.getList()
          }
        )
      })


    },
    addPerson(){
      this.addDialogVisible = true;
    },
    addPersonOne(){
      var paramd = {
        form:this.thisForm
      };
      this.$api.personnel.zhujian_add_per(paramd).then((res) => {
        if(res.code == 0){
          this.thisForm = {};
          this.addDialogVisible = false;
          this.getList()
        }
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },
    suerBtn() {
      this.isCheck = false;
    },
    handleCheckAllChange(val) {
      if (val) {
        let newArr = cityOptions.map(function(item) {
          return item.name;
        });
        this.arr = newArr;
      } else {
        this.arr = [];
      }
      this.isIndeterminate = false;
    },
    handlearrChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.current = val;
      this.getList();
    }
  }
};
</script>
<style lang="scss" scoped>

.page-container .page-sider-container {
    width: 0px;
    }
.main {
  width: 100%;
  height: 100%;
}
.el-dialog__title {
  color: #fff;
}
.cen {
  text-align: center;
}
.el-checkbox__inner {
  width: 20px;
}
.mt20{
  margin-top:20px;
}
.mt10{
  margin-top: 10px;
}
.ml10{
  margin-left: 10px;
}
.searchBox{
  display: flex;
  flex-direction: row;
}
.el-button+.el-button {
    margin-left: 10px;
}
.col{
  display: flex;
  flex-direction: column;
}
.acen{
  align-items: center;
}
.el-checkbox.is-bordered.el-checkbox--small {
    width: 40%;
}
.el-checkbox.is-bordered+.el-checkbox.is-bordered {
    margin-left: 0px;
}
.bold{
  font-weight: bold;
}
</style>
